<template>
  <div class="template-index-Lu">
    <div class="wageLogs-div">
      <div class="wageLogsDiv-left">
        <a-radio-group v-model="checkType" button-style="solid">
          <div  v-for="(item,index) in leftData" :key="index" style="margin-bottom: 10px;">
            <a-radio-button :value="item">
              {{ item }}
            </a-radio-button>
            <br/>
          </div>
        </a-radio-group>
      </div>
      <div class="wageLogsDiv-right">
        <commpVxeTable
          :key="reCommpVxeTable"
          :conditionBtnRow="true"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="formItem"
          @checkboxChange="checkboxChange"
          ref="administrativeOffice"
          @searchEvent="searchEvent"
          @resetEvent="resetEvent"
          v-model="dataTableConfig.paramet"
          >
          <template v-slot:externalOperations="{data}">
            <vxe-form-item>
              <template>
                <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" action="" @change="importClick">
                  <a-button class="blue-btn" icon="import">导入模板</a-button>
                </a-upload>
                <!-- <a-button class="blue-btn"  @click="downloadMbExcel()" style="margin-left: 8px;">下载导入模板</a-button> -->
                <a-button class="blue-btn"  @click="exportClick()" style="margin-left: 8px;" icon="export">Zip导出</a-button>
                <a-button class="blue-btn"  @click="send('max')" style="margin-left: 8px;" icon="mail">发送</a-button>
              </template>
            </vxe-form-item>
          </template>
          <template v-slot:operation_fxm="{row}" data-desc="姓名">
                <span style="padding-right: 21;" v-if="row.fxm.length == 2">
                    <span v-for="(trem,tI) in row.fxm.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.fxm.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.fxm }}</span>
            </template>
          <template v-slot:typeOperation="{row}" data-desc="确认状态">
            <a-form layout="inline">
              <a-form-item>
                {{ row.fqrzt =='0'?'未确认':'已确认' }}
              </a-form-item>
            </a-form>
          </template>
          <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
              <a-form-item>
                  <a-button class="green-btn"  @click="showDrawer(row)" icon="eye">查看</a-button>
              </a-form-item>
              <a-form-item>
                  <a-button class="blue-btn"  @click="send(row)" icon="mail">发送</a-button>
              </a-form-item>
              <a-form-item>
                <a-popconfirm
                  title="确定要下载Png图片吗？"
                  @confirm="() => downloadPng(row)"
                >
                <a-button class="blue-btn" icon="vertical-align-bottom">下载Png图片</a-button>
                </a-popconfirm>
              </a-form-item>
              <a-form-item>
                <a-popconfirm
                  title="确定要下载excel文件吗？"
                  @confirm="() => downloadExcel(row)"
                >
                <a-button class="blue-btn" icon="vertical-align-bottom">下载excel文件</a-button>
                </a-popconfirm>
              </a-form-item>
              <a-form-item>
                  <a-button class="red-btn"  @click="deleteLog(row)" icon="delete">删除</a-button>
              </a-form-item>
            </a-form>
          </template>
        </commpVxeTable>
        <a-drawer
          title="表格详情"
          placement="right"
          :width="400"
          :visible="drawerVisible"
          @close="CloseDrawer"
          >
          <table  border="1" cellspacing="0" class="gzDrawerTable">
            <tr v-for="(item,index) in logsXqList" :key="index">
              <th>{{ item[0] }}</th>
              <td>{{ item[1] }}</td>
            </tr>
          </table>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'left',
              zIndex: 1,
            }"
          >
            <a-button  class="blue-btn" @click="CloseDrawer">
              关闭
            </a-button>
          </div>
        </a-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import {list,importList,exportList,queryGzjlxqById,deleteGzjl,sendGzjlQrzt,downGzjlxqPngFile,
        downGzjlxqExcelFile,exportGztclxMb} from './service/index'
import { downloadFile } from '@/api/manage'
export default {
  components: {
    commpVxeTable,
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.gzList,
        rowId: 'id',
        paramet: {},
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '工资套餐类型',
          field: 'fgztclx',
        },{
          title: '年份',
          field: 'fnf',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data2_header',
          }
        },{
          title: '月份',
          field: 'fyf',
          width: 80,
          titleInterval:true,
          slots: {
              header:'data3_header',
          }
        },{
          title: '姓名',
          field: 'fxm',
          titleInterval:true,
          slots: {
              header:'data4_header',
              default: 'operation_fxm',
          }
        },{
          title: '确认状态',
          field: 'fqrzt',
          width: 100,
          slots: {
            default: 'typeOperation',
          },
        },{
          title: '操作',
          field: 'jobid',
          width: 550,
          titleInterval:true,
          slots: {
          // 使用插槽模板渲染
            header:'data5_header',
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '姓名',
          model: 'fxm',
        },{
          label: '确认状态',
          model: 'fqrzt',
          type:'Select',
          options:[{
            label:'已确认',
            value:'1'
          },{
            label:'未确认',
            value:'0'
          }]
        },{
          label: '年份',
          model: 'fnf',
        },{
          label: '月份',
          model: 'fyf',
        },
      ],
      leftData: [],
      paramet: {},
      checkType: '',
      idList: [],
      drawerVisible: false,
      logsXqList: [],
      url: {
        genCode: assessCheckApi.exportList,
      },
    }
  },
  created() {
    this.getLeftData()
    this.paramet = JSON.parse(JSON.stringify(this.dataTableConfig.paramet))
  },
  methods: {
    //
    getLeftData(){
      //console.log('gzgzgz')
      list().then(res => {
        this.leftData = res.result
      })
    },
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      if(this.checkType !== ''){
        this.dataTableConfig.paramet = {
          ...this.paramet,
          fgztclx: this.checkType
        }
      } else {
        this.dataTableConfig.paramet = {
          ...this.paramet,
        }
      }

    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.paramet,
      }
      this.checkType = ''
    },
    renovateSearchTabel(){//刷新搜索、表格
      this.reCommpVxeTable = Date.now()
      this.$refs.administrativeOffice.resetEvent()
    },
    // 查看
    installTaoCan(row){
      this.formData = row
      this.$nextTick(() => {
        this.$refs.applicationTable.applicationTableVisible = true
      })
    },
    beforeUpload(e){
      return false
    },
    // 导入
    importClick({file}){
      //console.log('checkType',this.checkType)
      var that = this
      if(typeof file.uid !== 'undefined') {
        // if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("type",that.checkType);
          //console.log('fileData',fileData)
          importList(fileData).then(res => {
            if(res.code == 200){
              // that.reCommpVxeTable = Date.now()
              that.$message.success(res.message)
              that.renovateSearchTabel()
            } else {
              that.$message.warning(res.message)
            }
          })
        // }
      }
    },
    // 导出
    exportClick(data){
      //console.log('导出',this.dataTableConfig.paramet)
      let that = this
        that.$confirm({
        title: '您确定要导出这些记录吗?',
        content: '',
        okText: '确定',
        okType: 'info',
        cancelText: '取消',
        onOk() {
          var fileName = '工资记录数据' + Date.now()
          let data = {
            fgztclx: that.checkType
          }
          if(that.idList.length){
            data = {
              ...data,
              ids: that.idList.toString()
            }
          }
          // downloadFile(this.url.genCode, fileName + '.zip', sysGenConfig, 'GET').finally(() => {
          // })
          exportList(data).then((data) => {
            if (!data) {
                that.$message.warning('文件下载失败')
                return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/zip' }), fileName + '.zip')
            } else {
                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/zip' }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.zip')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
                that.reCommpVxeTable = Date.now()
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 导出工资套餐类型对应模板-通过工资套餐类型id
    downloadMbExcel(){
      let that = this
      if(that.checkType !== ''){
        that.$confirm({
          title: '您确定要下载当前模板吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            exportGztclxMb({id:id}).then(res => {
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      } else {
        this.$message.warning('请从左侧模板列表里选择下载模板')
      }
    },
    // 下载Png图片文件-工资记录详情
    downloadPng(row){
      downGzjlxqPngFile({id:row.id}).then(res => {
        var fileName = row.fxm + row.fnf+'/' + row.fyf + '/'+ '工资图片'
        if (!res) {
            this.$message.warning('图片下载失败')
            return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([res], { type: 'application/vnd.ms-excel' }), fileName + '.png')
        } else {
            let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.png')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    // 下载excel文件-工资记录详情
    downloadExcel(row){
      downGzjlxqExcelFile({id:row.id}).then((data) => {
        var fileName = row.fxm + row.fnf+'/' + row.fyf + '/' + '工资记录'
        if (!data) {
            this.$message.warning('文件下载失败')
            return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    showDrawer(row) {
      queryGzjlxqById({id:row.id}).then(res => {
        this.logsXqList = []
        this.logsXqList = res.result.gzjlxqList
        this.drawerVisible = true;
      })
    },
    CloseDrawer() {
      this.drawerVisible = false;
    },
    // 删除
    deleteLog(row){
      let that = this
      that.$confirm({
        title: '您确定要删除这条记录吗?',
        content: '',
        okText: '确定',
        okType: 'warning',
        cancelText: '取消',
        onOk() {
          deleteGzjl({id:row.id}).then(res => {
            if(res.code == 200){
              that.reCommpVxeTable = Date.now()
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 发送工资记录-确认状态-已确认
    send(row){
      let data = {}
      let list = this.idList.toString()
      if(row == 'max'){
        if(this.idList.length){
          data = {
            ids: list
          }
          sendGzjlQrzt(data).then(res => {
            if(res.code == 200){
              this.reCommpVxeTable = Date.now()
              this.$message.success(res.message)
            } else {
              this.$message.warning(res.message)
            }
          })
        } else {
          this.$message.warning('请选择发送项目')
        }
      } else {
        data = {
          ids: row.id
        }
        sendGzjlQrzt(data).then(res => {
          if(res.code == 200){
            this.reCommpVxeTable = Date.now()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }
  }
}
</script>
<style>
@import url('../../css/oaLess.css');
/* @import url('../../css/oaClass.css'); */
</style>
